<template>
    <section>
        <div class="page-card">
            <div class="remittance-steps">
                <div class="remittance-step">
                    <div class="step">STEP1</div>
                    <div class="title">线下汇款</div>
                    <img src="@/assets/img/console/remittance-step1.png" alt="">
                </div>

                <img style="left:124px;top:8px;" class="remittance-line" src="@/assets/img/console/remittance-line.png"
                    alt="">
                <div class="remittance-step">
                    <div class="step">STEP2</div>
                    <div class="title">上传汇款凭证</div>
                    <img src="@/assets/img/console/remittance-step2.png" alt="">
                </div>

                <img style="left:400px;top:8px;" class="remittance-line" src="@/assets/img/console/remittance-line.png"
                    alt="">
                <div class="remittance-step">
                    <div class="step">STEP3</div>
                    <div class="title">平台确认充值到账</div>
                    <img src="@/assets/img/console/remittance-step3.png" alt="">
                </div>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">汇款信息</span>
            </div>
            <div class="card-content">
                <a-form :label-col="{
                    style: {
                        width: '120px',
                    }
                }">
                    <a-form-item label="开户行" name="gpuName">
                        {{ accout.bankName }}
                    </a-form-item>
                    <a-form-item label="收款账号" name="gpuNum">
                        {{ accout.cardNo }}
                    </a-form-item>
                    <a-form-item label="公司名称" name="netSpeed">
                        {{ accout.companyName }}
                    </a-form-item>

                    <div style="color: #8A93A7;padding-left: 120px;"><info-circle-filled
                            style="margin-right: 5px;color: #D9D9D9;" />线下汇款一般会在您上传凭证后3个工作日内到账。如有问题请<span @click="contactUs"
                            style="color: #07f;">联系客服</span></div>
                </a-form>

            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">上传记录</span>
                <a-button type="primary" class="opt" @click="modalVisible = true">上传凭证</a-button>
            </div>
            <div class="card-content">
                <a-table :dataSource="tableList" :pagination="false" bordered>
                    <a-table-column key="createdAt" title="提交时间" data-index="createdAt" />
                    <a-table-column key="amount" title="汇款金额" data-index="amount" />
                    <a-table-column key="payCertFile" title="汇款凭证" data-index="payCertFile" :ellipsis="true">
                        <template #default="{ record }">
                            <a :href="record.payCertFile" target="_blank">{{ transformStr(record.payCertFile)  }}</a>
                        </template>
                    </a-table-column>
                    <a-table-column key="applyId" title="上传编号" data-index="applyId" />
                    <a-table-column key="auditStatus" title="充值状态" data-index="auditStatus">
                        <template #default="{ record }">
                            {{ selectDictLabel(auditStatusEnum, record?.auditStatus) }}
                        </template>
                    </a-table-column>
                    <a-table-column key="action" title="操作">
                        <template #default="{ record }">
                            <a-popconfirm title="确定要删除汇款信息吗?" @confirm="handelDel(record.id)">
                                <a-button type="link"
                                    v-if="record.auditStatus == 1 || record.auditStatus == 4" style="padding-left:0;">删除</a-button>
                            </a-popconfirm>
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>

        <a-modal v-model:visible="modalVisible" title="上传凭证" @ok="handleOk">
            <a-form class="query-list-form" :model="form" ref="formRef" :label-col="{ span: 6 }">
                <a-form-item label="汇款金额" name="amount" :rules="[{ required: true, message: '请输入汇款金额' }]">
                    <a-input placeholder="请输入汇款金额" v-model:value="form.amount"></a-input>
                </a-form-item>
                <a-form-item label="汇出账户名称" name="accountName" :rules="[{ required: true, message: '请输入汇出账户名称' }]">
                    <a-input placeholder="请输入汇出账户名称" v-model:value="form.accountName"></a-input>
                </a-form-item>
                <a-form-item label="汇出账户" name="account" :rules="[{ required: true, message: '请输入汇出账户' }]">
                    <a-input placeholder="请输入实例名称" v-model:value="form.account"></a-input>
                </a-form-item>
                <a-form-item label="汇款凭证" name="receipt" :rules="[{ required: true, message: '请上传汇款凭证' }]">
                    <a-upload v-model:file-list="fileList" name="file" list-type="picture-card" :headers="headers"
                        class="avatar-uploader" :action="uploadImgUrl" @change="handleIdCardChange">
                        <div v-if="fileList.length < 1">
                            <plus-outlined></plus-outlined>
                            <div class="ant-upload-text">请上传汇款凭证</div>
                        </div>
                    </a-upload>
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 联系客服 -->
        <a-modal v-model:visible="payVisible" title="联系我们">
            <div style="text-align: center;">
                <img style="width: 300px;height: 400px;" :src="handleImg('console/contact-us.png')" alt="">
            </div>
        </a-modal>


    </section>
</template>

<script setup name="Ambassador">
import { ref, onMounted, transformVNodeArgs } from 'vue'
import {
    InfoCircleFilled,
} from '@ant-design/icons-vue';
import { offlineRecharge, getRechargeRecordsApi, getRechargeAccountApi, deleteRechargeApi } from 'api/modules/api.recharge'
import { uploadImgUrl } from '@/api/server.js'
import { ZyNotification } from '@/libs/util.toast'
import dbUtils from "libs/util.strotage";
import { selectDictLabel } from '@/libs/util.common'

// 获取线下账户
const accout = ref({})
const getRechargeAccout = () => {
    getRechargeAccountApi().then(res => {
        if (res.code == 0) {
            accout.value = res.data
        }
    })
}

getRechargeAccout()

// 获取线下充值记录
const tableList = ref([])
const getRechargeRecordsList = () => {
    getRechargeRecordsApi().then(res => {
        if (res.code == 0) {
            tableList.value = res.data.Records || []
        }
    })
}

const auditStatusEnum = [
    {
        label: '待审核',
        value: '1'
    },
    {
        label: '待审核',
        value: '2'
    },
    {
        label: '已通过',
        value: '3',
    },
    {
        label: '未通过',
        value: '4',
    }
]

getRechargeRecordsList()

// 上传凭证
const form = ref({})
const modalVisible = ref(false)
const formRef = ref()
const handleOk = () => {
    formRef.value.validateFields().then(() => {
        offlineRecharge(form.value).then(res => {
            if (res.code == 0) {
                ZyNotification.success("上传成功")
                modalVisible.value = false
                getRechargeRecordsList()
            }
        })
    })

}

// 上传身份证正面图片
const fileList = ref([])
const headers = {
    'gm-session-id': dbUtils.get('token')
}
const handleIdCardChange = ({
    file,
    fileList,
}) => {
    if (file.status === 'error') {
        ZyNotification.error(file.response.message || '上传失败')
    }
    if (file.status === 'done') {
        form.value.receipt = file.response.data.url || ''
    }
};

// 删除充值记录
const handelDel = (id) => {
    deleteRechargeApi(id).then(res => {
        if (res.code == 0) {
            ZyNotification.success("删除成功")
            getRechargeRecordsList()
        }
    })
}

// 联系客服
const payVisible = ref(false)
const contactUs = () => {
    payVisible.value = true
}

function transformStr(url) {
    var lastOf = url.lastIndexOf('/')
    var str = url.substr(lastOf + 1)
    return str || ''
}

</script>

<style scoped lang="scss">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 16px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        .header-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    .remittance-steps {
        display: flex;
        position: relative;

        .remittance-step {
            text-align: center;
            margin-right: 140px;

            .step {
                color: #07F;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                margin-bottom: 28px;
            }

            .title {
                color: #223354;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                margin-bottom: 32px;
            }

            img {
                width: 120px;
                height: 120px;
            }
        }

        .remittance-line {
            width: 126px;
            height: 7px;
            position: absolute;
        }
    }



    .card-content {
        .upload-tips {
            margin-top: 8px;
            color: #FAAD14;
            font-family: PingFang SC;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
        }

        :deep(.ant-form-item-label)>label {
            color: #8A93A7;
        }
    }
}</style>